<template>
  <div class="home">
    <div id="div">{{text}}</div>
    <!-- 这是home页面
    <button @click="btnClick">点击</button>

    <ul>
      <li v-for="(item, i) in arr" :key="i">{{item}}</li>
    </ul> -->
    <router-link to="/about">跳转</router-link>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      text: "你是个麻瓜",
      arr: [1, 2, 3]
    }
  },
  computed: {

  },
  filters: {

  },
  // 页面创建阶段
  beforeCreate() {
    console.log('页面创建之前的生命周期')
    // console.log(this.text) // undefined

  },

  created() {
    console.log('页面创建完成的生命周期')
    // console.log(this.text) // 你是个麻瓜
    var le = document.getElementById('div');
    console.log(le)
  },

  // 页面渲染（挂载）阶段
  beforeMount() {
    console.log('页面创建完成但是挂载之前的生命周期')
    var le = document.getElementById('div');
    console.log(le)
  },
  // dom渲染完成
  mounted() {
    console.log('页面创建完成但是挂载完成的生命周期')
    var le = document.getElementById('div');
    console.log(le)
  },
  methods: {
    btnClick() {
      // this.text = "hahaha"
      // this.arr.push('你是个麻瓜')
      this.bus.$emit('eve', '你是个麻瓜')
    }
  },
  // 页面更新的生命周期
  // dom更新完成或者打补丁结束后触发的生命周期
  beforeUpdate() {
    console.log(1)
  },
  updated() {
    console.log(2)
  },


  beforeDestroy() {
    console.log('页面销毁之前')
    // this.bus.$emit('eve', '你是个麻瓜')
  },

  destroyed() {
    console.log('页面销毁之后')
  }
}
</script>
